<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <style>
        /* 重置样式 */
        body{
            margin: 0;
            padding: 0;
        }
        /* 公共样式 */
        table,tr,th,td{
            border: 1px solid #ccc;
            border-collapse: collapse;
            border-spacing: 0;
        }
        /* 业务样式 */
        /* 设置购物车的宽度和边框 */
        .cart{
            margin: 20px auto;
            width: 600px;
            border: 1px solid #eee;
        }
        /* 设置表格主题 */
        .cart caption{
            font-size: 20px;
            font-weight: bold;
        }
        /* 设置表头的样式 */
        .cart th{
            padding:5px 20px;
            color: #666;
            background-color: #f7f7f7
        }
        /* 设置表格内容的样式 */
        .cart td{
            padding: 10px 20px;
            
        }
        /* 设置最后一行 */
        .right{
            text-align: right;
        }


        

    </style>
</head>
<body>
    <div id="app">
        <table class="cart">
            <caption>购物车</caption>
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>算法导论</td>
                <td>2006-9</td>
                <td>￥85.00</td>
                <td><button>-</button>
                1
                <button>+</button></td>
                <td><button>移除</button></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Unix编程艺术</td>
                <td>2006-2</td>
                <td>￥59.00</td>
                <td><button>-</button>
                1
                <button>+</button></td>
                <td><button>移除</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>编程珠玑</td>
                <td>2008-10</td>
                <td>￥39.00</td>
                <td><button>-</button>
                1
                <button>+</button></td>
                <td><button>移除</button></td>
            </tr>
            <tr>
                <td colspan="6" class="right">总价格：￥183.00</td>
            </tr>
        </table>

    </div>
    <script>
        const app = Vue.createApp({

        }).mount('#app')

    </script>
</body>
</html>